<template>
  <div class="re-change">
    <navBar :title="headerTitle"></navBar>
    <van-tabs animated swipeable v-model="choose">
      <van-tab
        v-for="(item,index) in reChangeList"
        :title="item.money + '元'"
        :key="`reChange_item_${index}`"
      >
        <div class="re-change-card">
          <span class="card-info">安妮储值卡</span>
          <div class="card-price">
            <h5 class="price">
              <span>{{rechargeItem.money}}</span>
              <span class="units">元</span>
            </h5>
            <p class="tips">送优惠券满30减15</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- <h5 class="pay-way">支付方式</h5> -->
    <!-- <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell title="微信支付" clickable @click="radio = '1'">
          <van-radio slot="right-icon" name="1" checked-color="#07c160">
            <img src="/img/14.png" class="pay-way-icon" />
          </van-radio>
        </van-cell>
        <van-cell title="微信支付" clickable @click="radio = '2'">
          <van-radio slot="right-icon" name="2" checked-color="#07c160">
            <img src="/img/13.png" class="pay-way-icon" />
          </van-radio>
        </van-cell>
      </van-cell-group>
    </van-radio-group> -->
    <van-button type="default" class="pay" @click="recharge">立即支付{{rechargeItem.money}}元</van-button>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Tab, Tabs, Cell, CellGroup, RadioGroup, Radio, Button } from "vant";
Vue.use(Tab)
  .use(Tabs)
  .use(Cell)
  .use(CellGroup)
  .use(Button)
  .use(RadioGroup)
  .use(Radio);
export default {
  data() {
    return {
      choose: 0,
      headerTitle: "充值专区",
      reChangeList: [
        { money: 200 },
        { money: 300 },
        { money: 500 },
        { money: 1000 },
        { money: 5000 }
      ],
      radio: "1"
    };
  },
  methods:{
    recharge(){
      this.$store.dispatch('recharge',{
        amount: this.rechargeItem.money
      }).then(res=>{
        this.$util.wxPay({
          data: res.data.result,
          success: (res) => {
            this.$router.push({
              name: 'wallet'
            })
          }
        })
      }).catch(e=>{

      })
    }
  },
  computed:{
    rechargeItem(){
      return this.reChangeList[this.choose]
    }
  },
  components: { navBar }
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.van-tabs__content {
  position: relative;
  padding-top: 50px;
}
.van-tabs__nav {
  justify-content: center;
  width: 100vw;
  padding: 0 50px;
  box-sizing: border-box;
}
.re-change {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: rgba(247, 247, 247, 1);
  .van-tabs {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(186, 186, 186, 1);
    background-color: #fff;
  }
  .van-tabs__line {
    width: 44px;
    bottom: 8px;
    background-color: rgba(0, 124, 157, 1);
  }
  .van-tabs__wrap {
    top: 255px;
  }
  .re-change-card {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    width: 264px;
    height: 163px;
    background: linear-gradient(
      203deg,
      rgba(238, 236, 232, 1) 0%,
      rgba(229, 227, 218, 1) 100%
    );
    border-radius: 7px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  }
  .re-change-card {
    position: relative;
    .card-info {
      position: absolute;
      right: 14px;
      top: 15px;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(186, 186, 186, 1);
    }
    .card-price {
      position: absolute;
      top: 51px;
      left: 27px;
      .price {
        font-size: 41px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(71, 66, 69, 1);
        .units {
          font-size: 16px;
          font-family: PingFangSC-Medium;
          font-weight: 600;
          color: #474245;
        }
      }
      .tips {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 500;
        color: rgba(71, 66, 69, 1);
      }
    }
  }
  .pay-way {
    position: relative;
    top: 25px;
    width: 100%;
    height: 100px;
    line-height: 125px;
    font-size: 0.373333rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #303030;
    padding-left: 0.4rem;
    box-sizing: border-box;
    background-color: #fff;
  }
  .van-radio-group {
    position: relative;
    top: 383px;
    width: 100%;
    .van-cell {
      position: relative;
      height: 53px;
      .van-cell__title {
        padding-left: 70px;
        line-height: 35px;
      }
      .pay-way-icon {
        position: absolute;
        left: 15px;
        top: 0;
        transform: translate(50%, 50%);
        height: 27px;
        width: 27px;
      }
    }
  }
  .pay {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    // margin-top: 80px;
  }
  .van-button--default {
    width: 333px;
    height: 41px;
    background: linear-gradient(
      90deg,
      rgba(1, 47, 64, 1) 0%,
      rgba(1, 47, 64, 1) 100%
    );
  }
  .van-button__text {
    width: 115px;
    height: 22px;
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
}
</style>
